<template>
	<view style="width: 100%; height: 80px;">
		
		<view class="search-complete-char">
			<block v-if="loading">

				<view class="search-ing">
					<image src="/static/searching.png" class="search-icon"></image>
					<view style="margin-left: 10px;">
						获取中...zzzz{{diandian}}
					</view>
				</view>
				
			</block>
			<block v-else>
				<view v-if="info == null" class="no-info">点击上方按钮获取相应位置玩家</view>
				<view v-else class="chrs">
					<player-cell :info="info">
						<view class="t">
							{{afTime}}
						</view>
						<btn-a w="100px" h="40px" @btnClick="ask(info)" :loading="addLoading">加入待邀请</btn-a>
						
					</player-cell>
				</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	
	import btnA from '@/components/btn-a/btn-a.vue'
	import playerCell from '@/components/player-cell/player-cell.vue'
	
	export default {
		name:"search-complete-char",
		components: {
			btnA,
			playerCell
		},
		props: {
			info: {
				type: Object,
				default: null
			},
			afTime: {
				typeo: String,
				default: '02 : 00'
			},
			loading: {
				type: Boolean,
				default: false
			},
			diandian: {
				typeo: String,
				default: '.'
			},
			addLoading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
			};
		},
		
		// created() {
			
		// },
		
		methods: {
			
			ask(info) {
				if (this.addLoading) return
				this.$emit('ask', info)
			}
		}
	}
</script>

<style scoped>

	.search-complete-char {
		border: 1px wheat dashed;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border-radius: 3px;
		
	}
	
	.bg-bl {
		background:  linear-gradient(to left, #5b5134, #43090a);
	}
	
	.bg-lm {
		background:  linear-gradient(to left, #5b5134, #121d32);
	}
	
	.no-info {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: wheat;
	} 
	
	.chrs {
		margin: 5px;
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		display: flex;
		align-items: center;
		border-radius: 2px;
		/* background-color: wheat; */
		position: relative;
	}
	
	.t {
		color: wheat;
		text-shadow: 1px 1px 1px black;
		margin-right: 10px;
	}
	
	.yq-btn {
		margin-right: 13px;
		display: flex;
		align-items: center;
	}
	
	.search-ing {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: wheat;
	}
	
	.search-icon {
		width: 20px; height: 20px;
		animation: rotateAround 1s infinite linear;
	}
	
	@keyframes rotateAround {
	  0% {
	    transform: rotate(0deg) translateX(1px) rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg) translateX(1px) rotate(-360deg);
	  }
	}
</style>